<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    button {
        padding: 8px;
        margin: 8px;
        size: 20px;
    }

    .box {
        height: 200px;
    }
    </style>
</head>

<body>
    <div id="app">
        <div id="div" style="border: 1px solid blue;">
            <canvas id="canvas" style="border: 1px solid red;"></canvas>
        </div>
        <div class="box"></div>
        <div>
            <button onclick="moveLeft()">左移</button>
            <button onclick="moveRight()">右移</button>
            <button onclick="moveUp()">上移</button>
            <button onclick="moveDown()">下移</button>
        </div>
        <div>
            <button onclick="zoomIn()">放大</button>
            <button onclick="zoomOut()">缩小</button>
            <button onclick="restore()">还原</button>
        </div>
    </div>
    <script>
    let baseX = 0
    let baseY = 0
    let translateX = 0
    let translateY = 0
    let scale = 1
    let width = window.innerWidth
    let height = window.innerHeight
    console.log(width, height)
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    let image = new Image()
    image.src = '/zoom/img.png'
    image.onload = function() {
        canvas.width = width - 4
        canvas.height = image.height / image.width * canvas.width
        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
        baseX = canvas.width / 2
        baseY = canvas.height / 2
    }
    // ctx.fillRect(0, 0, 150, 75);
    let div = document.getElementById('div')
    div.addEventListener('touchstart', function(e) {
        let t = e.targetTouches[0]
        // let x = t.clientX - translateX
        // let y = t.clientY - translateY
        let newBaseX = baseX + translateX
        let newBaseY = baseY + translateY
        let x = ((t.clientX - newBaseX) / scale + newBaseX) - translateX
        let y = ((t.clientY - newBaseY) / scale + newBaseY) - translateY
        ctx.lineWidth = 5
        ctx.beginPath();
        ctx.moveTo(x, y);
        console.log('touchstart', x, y)
    })
    div.addEventListener('touchmove', function(e) {
        // console.log('touchmove', e)
        let t = e.targetTouches[0]
        // let x = t.clientX - translateX
        // let y = t.clientY - translateY
        let newBaseX = baseX + translateX
        let newBaseY = baseY + translateY
        let x = ((t.clientX - newBaseX) / scale + newBaseX) - translateX
        let y = ((t.clientY - newBaseY) / scale + newBaseY) - translateY
        ctx.lineTo(x, y);
        ctx.stroke();
    })
    div.addEventListener('touchend', function(e) {
        // console.log('touchend', e)
        // let t = e.targetTouches[0]
        // _log2.innerHTML = JSON.stringify({
        //     clientX: t.clientX,
        //     clientY: t.clientY,
        // })
    })

    function moveLeft() {
        translateX -= 10
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    function moveRight() {
        translateX += 10
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    function moveUp() {
        translateY -= 10
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    function moveDown() {
        translateY += 10
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    function zoomIn() {
        scale += 0.1
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    function zoomOut() {
        scale -= 0.1
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
        console.log(canvas.width, canvas.height, scale, div.style)
    }

    function restore() {
        console.log(translateX, translateY, scale)
        translateX = 0
        translateY = 0
        scale = 1
        div.style.transform = `translate(${translateX}px,${translateY}px) scale(${scale},${scale})`
    }

    // document.addEventListener('mouse')
    </script>
</body>

</html>